<template>
  <div class="device-list">
    <!-- 搜索和按钮区域 -->
    <div class="search-and-buttons">
      <!-- 搜索区域 -->
      <div class="search-bar">
        <div class="search-item">
          <div class="search-label">设备名称</div>
          <el-input v-model="searchForm.name" placeholder="请输入设备名称" class="search-input" />
        </div>

        <div class="search-item">
          <div class="search-label">设备编号</div>
          <el-input v-model="searchForm.code" placeholder="请输入设备编号" class="search-input" />
        </div>

        <div class="search-item">
          <div class="search-label">设备类型</div>
          <el-select v-model="searchForm.type" placeholder="请选择类型" class="search-input">
            <el-option label="全部" value="" />
            <el-option label="正常" value="true" />
            <el-option label="异常" value="false" />
          </el-select>
        </div>

        <div class="search-item">
          <div class="search-label">状态</div>
          <el-select v-model="searchForm.status" placeholder="请选择状态" class="search-input">
            <el-option label="全部" value="" />
            <el-option label="正常" value="true" />
            <el-option label="异常" value="false" />
          </el-select>
        </div>

        <div class="search-buttons">
          <el-button type="primary" @click="searchDevices" class="search-button">搜索</el-button>
          <el-button @click="resetSearch" class="search-button">重置</el-button>
        </div>
      </div>

      <!-- 操作按钮区域 -->
      <div class="button-group">
        <el-button type="primary" @click="openAddDialog">新增设备</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        <el-button type="warning" @click="handleExport">导出数据</el-button>
        <el-button type="info" @click="openImportDialog">导入数据</el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="paginatedDevices"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="ID" align="center">
        <template #default="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="deviceCode" label="设备编号" align="center" />
      <el-table-column prop="name" label="设备名称" align="center" />
      <el-table-column prop="sensorTypeId" label="设备类型" align="center" />
      <el-table-column prop="latitude" label="纬度" align="center" />
      <el-table-column prop="longitude" label="经度" align="center" />
      <el-table-column prop="installDate" label="安装时间" align="center" />
      <el-table-column prop="realtimeData" label="实时数据" align="center">
        <template #default="{ row }">
          {{ row.realtimeData || '暂无数据' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'success' : 'danger'">
            {{ row.status ? '正常' : '异常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="editDevice(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteDevice(row)">删除</el-button>
          <el-button type="warning" size="small" @click="openStatusDialog(row)">更新状态</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="custom-pagination">
      <span>共 {{ total }} 条</span>
      <select v-model="pageSize" @change="handleSizeChange" class="page-size-select">
        <option v-for="size in [10, 20, 30, 50]" :key="size" :value="size">{{ size }}条/页</option>
      </select>
      <button
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
        class="pagination-button"
      >
        &lt;
      </button>
      <button
        v-for="page in totalPages"
        :key="page"
        :class="['pagination-button', { 'current-page': page === currentPage }]"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
      <button
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
        class="pagination-button"
      >
        &gt;
      </button>
      <span>前往</span>
      <input
        type="number"
        v-model.number="jumpPage"
        @keyup.enter="jumpToPage"
        class="pagination-input"
        :max="totalPages"
        :min="1"
      />
      <span>页</span>
    </div>

    <!-- 新增设备弹窗 -->
    <el-dialog
      v-model="addDialogVisible"
      title="新增设备信息"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="100px">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceCode">
          <el-input v-model="addForm.deviceCode" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="设备类型ID" prop="sensorTypeId">
          <el-input
            v-model.number="addForm.sensorTypeId"
            placeholder="请输入设备类型ID"
            type="number"
          />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model.number="addForm.latitude" placeholder="请输入纬度" type="number" />
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model.number="addForm.longitude" placeholder="请输入经度" type="number" />
        </el-form-item>
        <el-form-item label="安装时间" prop="installDate">
          <el-date-picker
            v-model="addForm.installDate"
            type="date"
            placeholder="请选择安装时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="addForm.status" placeholder="请选择状态">
            <el-option label="正常" :value="true" />
            <el-option label="异常" :value="false" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 维护记录弹窗 -->
    <el-dialog
      v-model="maintenanceDialogVisible"
      :title="`设备 ${currentDevice?.code} 维护历史`"
      width="800px"
    >
      <el-tabs v-model="activeMaintenanceTab">
        <el-tab-pane label="维护记录" name="records">
          <el-table :data="maintenanceRecords" border style="width: 100%">
            <el-table-column prop="time" label="时间" width="180" />
            <el-table-column prop="operator" label="人员" width="120" />
            <el-table-column prop="operation" label="操作" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="故障上报" name="report">
          <el-form :model="faultForm" label-width="100px">
            <el-form-item label="故障描述">
              <el-input
                v-model="faultForm.description"
                type="textarea"
                rows="4"
                placeholder="请输入故障描述"
              />
            </el-form-item>
            <el-form-item label="故障图片">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleFaultImageChange"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="maintenanceDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="addMaintenanceRecord">新增记录</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 状态修改弹窗 -->
    <el-dialog v-model="statusDialogVisible" title="快速更新设备状态" width="400px">
      <el-radio-group v-model="newStatus">
        <el-radio label="true"> <span class="status-icon running">🟢</span> 正常 </el-radio>
        <el-radio label="false"> <span class="status-icon fault">🔴</span> 异常 </el-radio>
      </el-radio-group>
      <el-form v-if="newStatus === 'false'" :model="faultCodeForm" label-width="80px">
        <el-form-item label="故障码">
          <el-input v-model="faultCodeForm.code" placeholder="请输入故障码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="statusDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateDeviceStatus">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导入数据弹窗 -->
    <el-dialog v-model="importDialogVisible" title="批量导入设备数据" width="500px">
      <div class="import-steps">
        <div class="step">
          <span class="step-title">1. 下载模板</span>
          <el-button type="primary" link @click="downloadTemplate">下载Excel模板</el-button>
        </div>
        <div class="step">
          <span class="step-title">2. 上传文件</span>
          <el-upload
            class="upload-area"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            accept=".xlsx,.xls"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </div>
        <div v-if="importValidation" class="validation-result">
          <el-alert
            :title="importValidation.message"
            :type="importValidation.type"
            :description="importValidation.details"
            show-icon
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" :disabled="!importValidation?.success" @click="confirmImport">
            开始导入
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑设备弹窗 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑设备信息"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="editFormRef" :model="editForm" :rules="addFormRules" label-width="100px">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceCode">
          <el-input v-model="editForm.deviceCode" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="设备类型ID" prop="sensorTypeId">
          <el-input
            v-model.number="editForm.sensorTypeId"
            placeholder="请输入设备类型ID"
            type="number"
          />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model.number="editForm.latitude" placeholder="请输入纬度" type="number" />
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model.number="editForm.longitude" placeholder="请输入经度" type="number" />
        </el-form-item>
        <el-form-item label="安装时间" prop="installDate">
          <el-date-picker
            v-model="editForm.installDate"
            type="date"
            placeholder="请选择安装时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editForm.status" placeholder="请选择状态">
            <el-option label="正常" :value="true" />
            <el-option label="异常" :value="false" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEditForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, UploadFilled } from '@element-plus/icons-vue'
import request from '@/utils/request'
import {
  saveDevice,
  updateDevice,
  deleteDevice as apiDeleteDevice,
  batchDeleteDevice,
} from '@/api/devicelist'

// 搜索表单
const searchForm = reactive({
  name: '',
  code: '',
  type: '',
  status: '',
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const jumpPage = ref(1)

// 计算总页数，最小为1
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))

// 表格数据
const devices = ref([]) // Initialize as empty array, data will come from API

const selectedDevices = ref([])

// 弹窗控制
const addDialogVisible = ref(false)
const maintenanceDialogVisible = ref(false)
const statusDialogVisible = ref(false)
const importDialogVisible = ref(false)
const editDialogVisible = ref(false)

// 新增表单
const addFormRef = ref(null)
const addForm = reactive({
  name: '',
  deviceCode: '',
  sensorTypeId: 1,
  latitude: null,
  longitude: null,
  installDate: '',
  status: true,
})

// 表单验证规则
const addFormRules = {
  name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  deviceCode: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
  sensorTypeId: [{ required: true, message: '请输入设备类型ID', trigger: 'blur' }],
  latitude: [
    { required: true, message: '请输入纬度', trigger: 'blur' },
    { type: 'number', message: '纬度必须是数字', trigger: 'blur' },
  ],
  longitude: [
    { required: true, message: '请输入经度', trigger: 'blur' },
    { type: 'number', message: '经度必须是数字', trigger: 'blur' },
  ],
  installDate: [{ required: true, message: '请选择安装时间', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}

// 维护记录相关
const activeMaintenanceTab = ref('records')
const maintenanceRecords = ref([])
const currentDevice = ref(null)
const faultForm = reactive({
  description: '',
  images: [],
})

// 状态修改相关
const newStatus = ref('')
const faultCodeForm = reactive({
  code: '',
})

// 导入相关
const importValidation = ref(null)

// 计算属性：分页后的设备列表 (data will now come from API, this will just slice the fetched data)
const paginatedDevices = computed(() => devices.value)

// 新增表单
const editFormRef = ref(null)
const editForm = reactive({
  id: null,
  name: '',
  deviceCode: '',
  sensorTypeId: 1,
  latitude: null,
  longitude: null,
  installDate: '',
  status: true,
})

// 方法：搜索设备
const searchDevices = async () => {
  try {
    const response = await request.get('/device/select', {
      params: {
        name: searchForm.name,
        code: searchForm.code,
        type: searchForm.type === 'true' ? true : searchForm.type === 'false' ? false : '',
        status: searchForm.status === 'true' ? true : searchForm.status === 'false' ? false : '',
        pageNum: currentPage.value,
        pageSize: pageSize.value,
      },
    })

    if (response.code === 200) {
      devices.value = response.data || []
      total.value = response.data.length || 0
      // ElMessage.success('设备数据加载成功')
    } else {
      ElMessage.error(response.message || '获取设备数据失败')
    }
  } catch (error) {
    console.error('获取设备数据时发生错误:', error)
    ElMessage.error('获取设备数据失败，请检查网络或服务器')
  }
}

// 方法：重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = ''
  })
  searchDevices()
}

// 方法：处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedDevices.value = selection
}

// 方法：处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // Reset to first page when page size changes
  searchDevices()
}

// 方法：处理页码变化
const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
    searchDevices()
  }
}

// 方法：处理页码跳转
const jumpToPage = () => {
  const page = parseInt(jumpPage.value)
  if (!isNaN(page) && page > 0 && page <= totalPages.value) {
    currentPage.value = page
    searchDevices()
  } else {
    ElMessage.warning('请输入有效的页码')
  }
}

// 方法：获取设备类型文本 (updated to map boolean to text)
const getTypeText = (typeValue) => {
  if (typeValue === true || typeValue === 'true') return '正常'
  if (typeValue === false || typeValue === 'false') return '异常'
  // If backend still sends 'production', 'testing', 'office' for type, map them here too
  const map = {
    production: '生产设备',
    testing: '检测设备',
    office: '办公设备',
  }
  return map[typeValue] || typeValue
}

// 方法：打开新增设备弹窗
const openAddDialog = () => {
  addDialogVisible.value = true
  addForm.name = ''
  addForm.deviceCode = ''
  addForm.sensorTypeId = 1
  addForm.latitude = null
  addForm.longitude = null
  addForm.installDate = ''
  addForm.status = true
  if (addFormRef.value) {
    addFormRef.value.resetFields()
  }
}

// 方法：提交新增表单
const submitAddForm = async () => {
  if (!addFormRef.value) return
  await addFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const payload = {
          deviceCode: addForm.deviceCode,
          name: addForm.name,
          sensorTypeId: addForm.sensorTypeId,
          latitude: addForm.latitude,
          longitude: addForm.longitude,
          installDate: addForm.installDate,
          status: addForm.status,
        }
        const response = await saveDevice(payload)
        if (response.code === 200) {
          ElMessage.success('新增设备成功')
          addDialogVisible.value = false
          searchDevices()
        } else {
          ElMessage.error(response.message || '新增设备失败')
        }
      } catch (error) {
        ElMessage.error('新增设备失败，请检查网络或服务器')
      }
    }
  })
}

// 方法：编辑设备
const editDevice = (row) => {
  editForm.id = row.id
  editForm.name = row.name
  editForm.deviceCode = row.deviceCode
  editForm.sensorTypeId = row.sensorTypeId
  editForm.latitude = row.latitude
  editForm.longitude = row.longitude
  editForm.installDate = row.installDate ? row.installDate.slice(0, 10) : ''
  editForm.status = row.status
  editDialogVisible.value = true
}

// 方法：提交编辑表单
const submitEditForm = async () => {
  if (!editFormRef.value) return
  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const payload = {
          id: editForm.id,
          deviceCode: editForm.deviceCode,
          name: editForm.name,
          sensorTypeId: editForm.sensorTypeId,
          latitude: editForm.latitude,
          longitude: editForm.longitude,
          installDate: editForm.installDate,
          status: editForm.status,
        }
        const response = await updateDevice(payload)
        if (response.code === 200) {
          ElMessage.success('编辑设备成功')
          editDialogVisible.value = false
          searchDevices()
        } else {
          ElMessage.error(response.message || '编辑设备失败')
        }
      } catch (error) {
        ElMessage.error('编辑设备失败，请检查网络或服务器')
      }
    }
  })
}

// 方法：删除设备
const deleteDevice = async (row) => {
  try {
    await ElMessageBox.confirm(`确定要删除设备 "${row.name}" 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    const response = await apiDeleteDevice(row.id)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      searchDevices()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch {
    // 用户取消删除
  }
}

// 方法：批量删除
const handleBatchDelete = async () => {
  if (selectedDevices.value.length === 0) {
    ElMessage.warning('请至少选择一个设备')
    return
  }
  try {
    await ElMessageBox.confirm(
      `确认删除选中的 ${selectedDevices.value.length} 条设备数据？此操作不可恢复！`,
      '警告',
      {
        confirmButtonText: '永久删除',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger',
      },
    )
    const ids = selectedDevices.value.map((item) => item.id)
    const response = await batchDeleteDevice(ids)
    if (response.code === 200) {
      ElMessage.success('批量删除成功')
      searchDevices()
    } else {
      ElMessage.error(response.message || '批量删除失败')
    }
  } catch {
    // 用户取消删除
  }
}

// 方法：导出数据
const handleExport = () => {
  // TODO: Implement export logic
  ElMessage.warning('导出数据功能待实现')
  console.log('导出数据')
}

// 方法：处理故障图片上传
const handleFaultImageChange = () => {
  // TODO: Implement image upload logic
  ElMessage.warning('故障图片上传功能待实现')
}

// 方法：添加维护记录
const addMaintenanceRecord = () => {
  // TODO: Implement add maintenance record logic
  ElMessage.warning('添加维护记录功能待实现')
  console.log('添加维护记录')
}

// 方法：打开状态修改弹窗
const openStatusDialog = (row) => {
  currentDevice.value = row
  newStatus.value = String(row.status) // Convert boolean to string 'true' or 'false'
  faultCodeForm.code = ''
  statusDialogVisible.value = true
}

// 方法：更新设备状态
const updateDeviceStatus = async () => {
  if (newStatus.value === 'false' && !faultCodeForm.code) {
    ElMessage.warning('请输入故障码')
    return
  }
  // TODO: Implement actual status update logic with API call
  ElMessage.success('状态更新成功')
  statusDialogVisible.value = false
  searchDevices()
}

// 方法：打开导入弹窗
const openImportDialog = () => {
  importDialogVisible.value = true
  importValidation.value = null
}

// 方法：下载模板
const downloadTemplate = () => {
  // TODO: Implement template download logic
  ElMessage.warning('下载模板功能待实现')
  console.log('下载模板')
}

// 方法：处理文件上传
const handleFileChange = () => {
  // TODO: Implement file validation logic
  importValidation.value = {
    success: true,
    type: 'success',
    message: '校验通过，可导入 23 条数据',
    details: '',
  }
  ElMessage.warning('文件上传验证功能待实现')
}

// 方法：确认导入
const confirmImport = () => {
  // TODO: Implement data import logic
  ElMessage.success('导入成功')
  importDialogVisible.value = false
  searchDevices()
}

// 初始化
onMounted(() => {
  searchDevices()
})
</script>

<style scoped lang="scss">
.device-list {
  padding: 20px;
  background-color: #f9f9f9; // 与用户管理页面一致
}

.search-and-buttons {
  background-color: transparent; // 用户管理页面无背景
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  background: none;
  border-radius: 0;

  .search-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .search-label {
    white-space: nowrap;
    font-size: 14px;
  }

  .search-input,
  .search-select {
    width: 160px;
  }

  .search-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
  }
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.custom-button {
  white-space: nowrap;
  padding: 5px 10px;
  width: auto;
  min-width: 80px;
  text-align: center;
  border-radius: 4px;
}

.pagination-container {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 16px;
  background: none;
  border-radius: 0;
  padding: 0;
  justify-content: flex-start;
}

.pagination-left {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
}

.custom-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 16px; /* 调整字体大小 */
}

.page-size-select {
  padding: 2px 6px; /* 调整下拉框内边距 */
  border: none; /* 移除边框 */
  outline: none; /* 移除聚焦时的黑色边框 */
  border-radius: 4px;
  font-size: 14px; /* 调整字体大小 */
  background-color: #fff; /* 确保背景颜色一致 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加轻微阴影以增强视觉效果 */
  width: 120px;
  height: 32px;
  margin-left: 10px;
  margin-right: 6px;
}

.pagination-button {
  padding: 2px 6px; /* 减小按钮的内边距 */
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px; /* 调整字体大小 */
  min-width: 30px; /* 减小按钮的最小宽度 */
  text-align: center;
  transition:
    background-color 0.3s,
    color 0.3s;
  margin-right: 6px;
}

.pagination-button.current-page {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
  font-weight: bold;
}

.pagination-button:disabled {
  cursor: not-allowed;
  background-color: #f5f5f5;
  color: #ccc;
}

span {
  margin: 0 2px;
}

.pagination-input {
  width: 40px; /* 调整输入框宽度 */
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px; /* 减小输入框内边距 */
  font-size: 14px; /* 调整字体大小 */
  height: 30px;
  margin: 0 4px;
}
</style>
